<template>
  <div class="base-form-wrapper">
      <ul class='filter-list'>
          <li v-for="(item, index) in config" :key="index">
              <label>{{item.label}} :</label>
                <el-select v-if="item.type === 'select'" v-model="filter[item.key]" clearable v-bind="item.props" @change="(value) => setValue()">
                    <el-option
                        v-for="item in item.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker
                    v-if="item.type === 'datepicker'"
                    v-model="filter[item.key]"
                    v-bind="item.props"
                    @change="(value) => setValue()"
                >
                </el-date-picker>
                <el-input 
                    v-if="item.type === 'text'"
                    v-model="filter[item.key]" 
                    v-bind="item.props"
                    @change="(value) => setValue()"
                ></el-input>
                <el-radio-group 
                    v-if="item.type === 'radio'"
                    v-model="filter[item.key]"
                    v-bind="item.props"
                    @change="(value) => setValue()"
                >
                    <el-radio v-for="option in item.options" :key="option.value" :label="option.value">{{option.label}}</el-radio>
                </el-radio-group>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
    props: {
        config: Array
    },
    data(){
        const initData = {};
        this.config.forEach(item => {
            initData[item.key] = item.value || undefined;
        })
        return {
            filter: initData
        }
    },
    methods: {
        setValue(){
            this.$emit("mychange", this.filter)
        }
    }
}
</script>

<style lang="scss">
.base-form-wrapper {
    .filter-list {
        list-style: none;
        display: flex;
        li {
            display: flex;
            align-items: center;
            margin-right: 10px;
            label {
                margin-right: 10px;
                display: inline-block;
            }
            .el-input {
                flex: 1;
            }
        }
    }
}
</style>